<template>
  <el-popover v-bind="$attrs" :placement="placement" :width="contentWidth" :trigger="trigger">
    <!-- 自定义内容插槽 -->
    <template #default>
      <slot>{{ content }}</slot>
    </template>
    <!-- 触发器插槽 -->
    <template #reference>
      <div class="inline-flex cursor-pointer">
        <!-- 自定义图标 -->
        <el-icon v-if="icon">
          <component
            :is="icon"
            class="trigger-icon"
            :style="{ color: iconColor, fontSize: iconSize }"
            @click="handleIconClick"
          />
          <slot name="trigger" />
        </el-icon>
      </div>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import type { Component, PropType } from "vue";

const props = defineProps({
  // 图标组件（需要传入完整的图标组件）
  icon: {
    type: String,
    default: null,
  },
  // 图标颜色
  iconColor: {
    type: String,
    default: "#409eff",
  },
  // 图标大小（带单位）
  iconSize: {
    type: String,
    default: "20px",
  },
  // 弹出框位置
  placement: {
    type: String as PropType<
      | "top"
      | "bottom"
      | "left"
      | "right"
      | "top-start"
      | "top-end"
      | "bottom-start"
      | "bottom-end"
      | "left-start"
      | "left-end"
      | "right-start"
      | "right-end"
    >,
    default: "bottom",
  },
  // 触发方式
  trigger: {
    type: String as PropType<"click" | "hover" | "focus">,
    default: "hover",
  },
  // 添加内容
  content: {
    type: String,
    default: "",
  },
  // 内容区域宽度
  contentWidth: {
    type: [String, Number],
    default: "auto",
  },
});

const emit = defineEmits(["icon-click"]);

const handleIconClick = (e: Event) => {
  emit("icon-click", e);
};
</script>

<style scoped>
.trigger-icon {
  transition: all 0.2s;
}

.trigger-icon:hover {
  opacity: 0.8;
}
</style>
